import React, { useState, useEffect } from 'react';
import Carousel, { Modal, ModalGateway } from 'react-images';

const ImgPreview = (props) => {
    const { images = [], open, onClose } = props;
    const [modalIsOpen, setModalIsOpen] = useState(open);
    useEffect(() => {
        setModalIsOpen(open);
    }, [images, open]);

    const toggleModal = () => {
        setModalIsOpen(!modalIsOpen);
        if (typeof onClose === 'function') {
            onClose();
        }
    };
    const styleInit = {
        header: () => ({
            // 头部样式
            position: 'absolute',
            top: 10,
            right: 10,
            zIndex: 9999,
        }),
        view: () => ({
            textAlign: 'center',
            maxHeight: '95vh',
            maxWidth: '95vw',
        }),
    };
    return (
        <ModalGateway>
            {modalIsOpen ? (
                <Modal onClose={toggleModal}>
                    <Carousel views={images} styles={styleInit} />
                </Modal>
            ) : null}
        </ModalGateway>
    );
};

export default ImgPreview;
